<template>
  <div id="CompanyIntroduction">
    <div class="banner container-fuild text-center">关于我们</div>
    <div class="container">
      <div class="row CompanyIntroduction-container">
        <div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn">
          <img
            class="img-responsive center-block"
            src="@/assets/img/about_img.png"
          />
        </div>
        <div class="container">
          <div class="col-xs-12 col-sm-12 col-md-6">
            <h3>深圳市云闪充科技有限公司</h3>
            <p class=".text-justify">
              云闪充是一家集"研发，生产，销售，服务"于一体的综合出行补能方案提供商，我们以"技术先行，服务至上"为宗旨，致力于为广大出行者提供最高效便利的补能方案。 
                 
              我们当前的主营业务为电动汽车各类充电桩的研发、制造和销售，以及充电桩配套的后台管理系统的研发。云闪充的核心竞争力在于技术研发和市场创新。我们的技术团队来自于金融支付公司核心骨干员工，拥有丰富的技术经验，持续推动公司的技术升级和产品创新。我们的产品和服务被用户所认可，深受市场欢迎。而我们的市场策略则是致力于构建长期、互惠的合作关系，与合作伙伴共同推进新能源汽车充电基础设施的发展。作为一个充满活力、创新驱动的公司，云闪充期待与各界朋友、企业及机构携手合作，共创绿色、智慧的未来。
              如果您对新能源汽车充电技术有浓厚兴趣，或希望探讨合作机会，欢迎随时联系我们。
            </p>
            <div class="Service-container row">
              <div
                class="Service-item col-xs-12 col-sm-6 col-md-6 wow slideInUp"
                v-for="(item, index) in serviceList"
                :key="index"
                @click="ServiceClick(item.id)"
              >
                <div class="Service-item-wrapper">
                  <div class="Service-item-top">
                    <h4>{{ item.title }}</h4>
                    <i></i>
                    <p>{{ item.eng_title }}</p>
                  </div>
                  <div class="Service-item-img">
                    <img
                      width="200px"
                      height="200px"
                      :src="item.img"
                      alt="服务"
                    />
                    <p class="Service-item-p">{{ item.bz }}</p>
                  </div>
                  <div class="Service-item-border"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { WOW } from "wowjs";
export default {
  name: "CompanyIntroduction",
  data() {
    return {
      serviceList: [
        {
          id: "section-1",
          title: "商务：黄经理",
          eng_title: "手机：133 8037 4416",
          img: require("@/assets/img/wx.jpg"),
          bz: "微信小程序"
        },
        {
          id: "section-2",
          title: "商务：罗经理",
          eng_title: "手机：181 2614 8595",
          img: require("@/assets/img/wxgzh.jpg"),
          bz: "微信公众号"
        }
      ]
    };
  },
  mounted() {
    var wow = new WOW();
    wow.init();
  }
};
</script>
<style scoped>
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url("../assets/img/banner_1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}

.row {
  margin-right: 0;
  margin-left: 0;
}

.CompanyIntroduction-container {
  padding: 100px 0;
  color: #808080;
  transition: all ease 0.5s;
}

.CompanyIntroduction-container > div > p {
  font-size: 14px;
  line-height: 2.5rem;
}

@media screen and (max-width: 997px) {
  .CompanyIntroduction-container {
    padding: 10px 0;
    color: #808080;
  }
}
.Service-item-p {
  font-size: 15px;
  text-align: center;
  margin-right: 30px;
  margin-top: 20px;
}
</style>
